<template>
  <div class="app-container projectMaintenance">
    <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="110px">
      <el-form-item label="施工单位：">
        <el-select v-model="selectForm.constructionUnit" placeholder="请选择" size="small" clearable>
          <el-option
            v-for="item in sgdwList"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称：">
        <el-input v-model="selectForm.pName" placeholder="请输入项目名称" size="small" clearable></el-input>
      </el-form-item>
      <el-form-item label="工程状态：">
        <el-select v-model="selectForm.projectStatus" placeholder="请选择" size="small" clearable>
          <el-option
            v-for="item in projectStatus"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  size="mini" type="success" icon="el-icon-plus" @click="add">新增</el-button>
        <el-button  size="mini" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="listData" border>
      <el-table-column align="center" label="施工单位" prop="deptName"/>
      <el-table-column align="center" label="工程名称" prop="pname"/>
      <el-table-column align="center" label="工程类型" prop="ptype">
        <template slot-scope="scope">
          <span v-show="scope.row.ptype=='1'">正常生产</span>
          <span v-show="scope.row.ptype=='2'">单项工程</span>
          <span v-show="scope.row.ptype=='3'">零星工程</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="工程状态" prop="projectStatus">
        <template slot-scope="scope">
          <span v-show="scope.row.projectStatus=='1'">施工</span>
          <span v-show="scope.row.projectStatus=='2'">完成</span>
          <span v-show="scope.row.projectStatus=='3'">暂停</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="开工日期" prop="startTime"> </el-table-column>
      <el-table-column align="center" label="完工日期" prop="ectualTime"></el-table-column>
      <el-table-column align="center" label="施工地点" prop="constructionSite"/>
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="name" :visible.sync="dialogVisible" width="700px"  :close-on-click-modal="false" >
      <el-form :model="addForm" ref="addForm" :inline="true" label-width="110px">
        <el-form-item label="工程名称：" prop="pname"
                      :rules="[{required: true, message: '请输入项目名称', trigger: 'blur'}]">
          <el-input v-model="addForm.pname" placeholder="请输入项目名称" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="施工单位：" prop="constructionUnit"
                      :rules="[{required: true, message: '请选择施工单位', trigger: 'change'}]">
          <el-select v-model="addForm.constructionUnit" placeholder="请选择施工单位" size="small" clearable>
            <el-option
              v-for="item in sgdwList"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程类型：" prop="ptype"
                      :rules="[{required: true, message: '请选择工程类型', trigger: 'change'}]">
          <el-select v-model="addForm.ptype" placeholder="请选择工程类型" size="small" clearable>
            <el-option
              v-for="item in projectType"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程状态：" prop="projectStatus"
                      :rules="[{required: true, message: '请选择工程状态', trigger: 'change'}]">
          <el-select v-model="addForm.projectStatus" placeholder="请选择工程状态" size="small" clearable>
            <el-option
              v-for="item in projectStatus"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="施工地点：" prop="constructionSite"
                      :rules="[{required: true, message: '请输入施工地点', trigger: 'blur'}]">
          <el-input class="address" v-model="addForm.constructionSite" placeholder="请输入施工地点" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="开工日期：" prop="startTime"
                      :rules="[{required: true, message: '请输入开工日期', trigger: 'blur'}]">
          <el-date-picker
            v-model="addForm.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="完工日期：" prop="ectualTime"
                      :rules="[{required: true, message: '请输入完工日期', trigger: 'blur'}]">
          <el-date-picker
            v-model="addForm.ectualTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取消</el-button>
        <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "projectMaintenance.vue",
    data() {
      return {
        name:'新增',
        listData:[],
        total:0,
        selectForm: {
          constructionUnit: '',//施工单位
          pname: '',
          projectStatus: '',
          pageNum: 1,
          pageSize: 10,
        },
        sgdwList: [],
        projectStatus: [
          {
            id: 1,
            title: '施工',
          }, {
            id: 2,
            title: '完成',
          }, {
            id: 3,
            title: '暂停',
          }
        ],
        loading: false,
        list: {
          rows: [],
          total: '',
        },
        dialogVisible: false,
        addForm: {
          pname:'',
          constructionUnit:'',
          ptype :'',
          projectStatus:'',
          constructionSite:'',
          startTime:'',
          ectualTime:'',
        },
        projectType: [{
          id: 1,
          title: '正常生产',
        }, {
          id: 2,
          title: '单项工程',
        }, {
          id: 3,
          title: '零星工程',
        }],
        leixing:'post',
      }
    },
    created() {
      this.getList();
      this.getsgdw()
    },
    methods: {
      //获取施工单位数据
      getsgdw:function(){
        request({
          url: '/system/dept/list',
          method: 'get',
        }).then(response => {
          this.sgdwList = response.data
        });
      },
      getList() {
        this.loading = true;
        request({
          url: '/method/WzEngineBudget/list',
          method: 'get',
          params:this.selectForm
        }).then(response => {
          this.loading = false;
          this.listData = response.rows
          this.total = response.total
        });
      },
      add() {
        this.addForm.ptype =''
        this.addForm.pname =''
        this.addForm.constructionUnit = ''
        this.addForm.projectStatus = ''
        this.addForm.constructionSite = ''
        this.addForm.startTime =''
        this.addForm.ectualTime =''
        this.leixing='post'
        this.name='新增'
        this.dialogVisible = true;
      },
      edit(row) {
        this.addForm.id = row.id
        this.addForm.ptype = row.ptype
        this.addForm.pname = row.pname
        this.addForm.constructionUnit = row.constructionUnit
        this.addForm.projectStatus = row.projectStatus
        this.addForm.constructionSite = row.constructionSite
        this.addForm.startTime = row.startTime
        this.addForm.ectualTime = row.ectualTime

        this.leixing='put'
        this.name='修改'
        this.dialogVisible = true;

      },
      onSubmit(){
        if(!this.addForm.pname){
          this.$message({
            type: 'error',
            message: '工程名称不能为空'
          });
          return
        }
        if(!this.addForm.constructionUnit){
          this.$message({
            type: 'error',
            message: '施工单位不能为空'
          });
          return
        }
        if(!this.addForm.ptype){
          this.$message({
            type: 'error',
            message: '工程类型不能为空'
          });
          return
        }
        if(!this.addForm.projectStatus){
          this.$message({
            type: 'error',
            message: '工程状态不能为空'
          });
          return
        }
        if(!this.addForm.constructionSite){
          this.$message({
            type: 'error',
            message: '施工地点不能为空'
          });
          return
        }
        if(!this.addForm.startTime){
          this.$message({
            type: 'error',
            message: '开工日期不能为空'
          });
          return
        }
        if(!this.addForm.ectualTime){
          this.$message({
            type: 'error',
            message: '完工日期不能为空'
          });
          return
        }
        if(this.addForm){
          for (var i=0;i<this.addForm.length;i++){
            this.addForm[i].projectStatus =this.addForm[i].projectStatus/1
            this.addForm[i].ptype =this.addForm[i].ptype/1
          }
        }
        request({
          url: '/method/WzEngineBudget',
          method: this.leixing,
          data: this.addForm
        }).then(response => {
          this.getList()

          this.dialogVisible = false;
          this.$message.success('操作成功！')
        });


      }
    }
  }
</script>

<style scoped lang="scss">
  .el-dialog {
    .el-form {
      .el-input {
        width: 200px;
      }
      .address{
        width:520px;
      }

    }
  }
</style>
